<template>
    <div id="maina" style="width: 600px;height:500px;"></div>
</template>
<script setup>
import * as echarts from 'echarts/core';
import { TooltipComponent } from 'echarts/components';
import { TreeChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted, ref } from 'vue';



onMounted(async ()=>{
echarts.use([TooltipComponent, TreeChart, CanvasRenderer]);
var chartDom = document.getElementById('maina');
var myChart = echarts.init(chartDom);
var option;
const data = {
  name: '课易',
  children: [
    {
      name: '前端',
      children: [
        {
          name: 'web前端基础班',
          children: [
            { name: '三十七期JavaScript'},
            { name: '三十九期JavaScript'}
          ]
        },
        {
          name: 'web前端全栈进阶班',
          children: [
            { name: 'Vue框架'},
            { name: 'React框架'}
          ]
        }
      ]
    },
    {
      name: '后端',
      children: [
        {
          name: 'python基础核心语法',
          children: [
            { name: '55期开发基础班'},
            { name: '52期开发基础班'},
            { name: '53期开发基础班'},
            { name: '51期开发基础班'}
          ]
        },
        {
          name: 'python全栈开发',
          children: [
            { name: '6-7全栈开发班'},
            { name: '4-28全栈开发班'},
            { name: '3-17全栈开发班'},
          ]
        }
      ]
    },
    {
      name: '大数据',
            children: [
        {
          name: '大数据基础',
          children: [
            { name: '1期大数据基础班' },
            { name: '2期大数据基础班'},
          ]
        },
        {
          name: '大数据基础',
          children: [
            { name: '1期大数据基础班' },
            { name: '2期大数据基础班'},
          ]
        }
      ]
    },
    {
      name: '网络安全',
      children: [
        {
          name: '网络安全基础',
          children: [
            { name: '1期网络安全基础班' },
            { name: '2期网络安全基础班'},
          ]
        },
        {
          name: '网络安全基础',
          children: [
            { name: '1期网络安全基础班' },
            { name: '2期网络安全基础班'},
          ]
        }
      ]
    },
    // {
    //   name: '自媒体',
    //   children: [
    //     {
    //       name: '自媒体基础',
    //       children: [
    //         { name: '1期自媒体基础班' },
    //         { name: '2期自媒体基础班'},
    //       ]
    //     },
    //     {
    //       name: '自媒体基础',
    //       children: [
    //         { name: '1期自媒体基础班' },
    //         { name: '2期自媒体基础班'},
    //       ]
    //     }
    //   ]
    // }
  ]
};
option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  series: [
    {
      type: 'tree',
      id: 0,
      name: 'tree1',
      data: [data],
      top: '10%',
      left: '8%',
      bottom: '22%',
      right: '20%',
      symbolSize: 7,
      edgeShape: 'polyline',
      edgeForkPosition: '63%',
      initialTreeDepth: 3,
      lineStyle: {
        width: 2
      },
      label: {
        backgroundColor: '#fff',
        position: 'left',
        verticalAlign: 'middle',
        align: 'right'
      },
      leaves: {
        label: {
          position: 'right',
          verticalAlign: 'middle',
          align: 'left'
        }
      },
      emphasis: {
        focus: 'descendant'
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    }
  ]
};

option && myChart.setOption(option);


})
</script>

<style lang="scss"></style>